<template>
    <div class="app-container">
        <el-card class="box-card">            
            <div slot="header" class="clearfix">
                <el-button type="primary" icon="el-icon-search" @click="TableSearch">搜 索</el-button>
                <el-button @click="Reset" icon="el-icon-delete">重 置</el-button>
            </div>
            <div class="tb-body">
                <el-form ref="searchFormRef" :model="searchForm" :inline="true" label-width="120px" :style="`flex:1;`">
                    <el-form-item label="关联用户账号">
                        <el-paged-select url="/User/List" columnName="Name" columnValue="Id"
                            v-model="searchForm.RelativeUserId">
                        </el-paged-select>
                    </el-form-item>                
                    <el-form-item label="国籍" prop="Nationality">
                        <el-input v-model.trim="searchForm.Nationality" placeholder="请输入国籍进行精确搜索" ></el-input>
                    </el-form-item>
                    <el-form-item label="图片" prop="Photo">
                        <el-input v-model.trim="searchForm.Photo" placeholder="请输入图片进行精确搜索" ></el-input>
                    </el-form-item>
                    <el-form-item label="身份证" prop="IdCard">
                        <el-input v-model.trim="searchForm.IdCard" placeholder="请输入身份证进行精确搜索" ></el-input>
                    </el-form-item>
                    <el-form-item label="姓名" prop="Name">
                        <el-input v-model.trim="searchForm.Name" placeholder="请输入姓名进行精确搜索" ></el-input>
                    </el-form-item>
                    <el-form-item label="学历" prop="Educational">
                        <el-input v-model.trim="searchForm.Educational" placeholder="请输入学历进行精确搜索" ></el-input>
                    </el-form-item>
                    <el-form-item label="性别" prop="Sex">
                        <el-input v-model.trim="searchForm.Sex" placeholder="请输入性别进行精确搜索" ></el-input>
                    </el-form-item>
                    <el-form-item label="出生年月">
                        <el-date-picker v-model="searchForm.BirthRange" type="datetimerange" start-placeholder="开始出生年月"
                            end-placeholder="结束出生年月" :default-time="['00:00:00']" value-format="yyyy-MM-dd HH:mm:ss">
                        </el-date-picker>                                       
                    </el-form-item>                
                    <el-form-item label="婚姻情况" prop="Marriage">
                        <el-input v-model.trim="searchForm.Marriage" placeholder="请输入婚姻情况进行精确搜索" ></el-input>
                    </el-form-item>
                    <el-form-item label="所属户口本">
                        <el-paged-select url="/Household/List" columnName="Name" columnValue="Id"
                            v-model="searchForm.HouseholdId">
                        </el-paged-select>
                    </el-form-item>                
                    <el-form-item label="职业" prop="Occupation">
                        <el-input v-model.trim="searchForm.Occupation" placeholder="请输入职业进行精确搜索" ></el-input>
                    </el-form-item>
                    <el-form-item label="籍贯" prop="OriginAddress">
                        <el-input v-model.trim="searchForm.OriginAddress" placeholder="请输入籍贯进行精确搜索" ></el-input>
                    </el-form-item>
                    <el-form-item label="民族" prop="Hometown">
                        <el-input v-model.trim="searchForm.Hometown" placeholder="请输入民族进行精确搜索" ></el-input>
                    </el-form-item>
                    <el-form-item label="户主或与户主的关系" prop="Relative">
                        <el-input v-model.trim="searchForm.Relative" placeholder="请输入户主或与户主的关系进行精确搜索" ></el-input>
                    </el-form-item>
                    <el-form-item label="出生地" prop="BirthAddress">
                        <el-input v-model.trim="searchForm.BirthAddress" placeholder="请输入出生地进行精确搜索" ></el-input>
                    </el-form-item>
                    <el-form-item label="兵役状况">
                        <el-paged-select url="/Select/MilitaryStatus" columnName="Name" columnValue="Value"
                            v-model="searchForm.MilitaryStatus">
                        </el-paged-select>
                    </el-form-item>                
                    <el-form-item label="曾用名" prop="BeforeName">
                        <el-input v-model.trim="searchForm.BeforeName" placeholder="请输入曾用名进行精确搜索" ></el-input>
                    </el-form-item>
                    <el-form-item label="其他地址" prop="OtherAddress">
                        <el-input v-model.trim="searchForm.OtherAddress" placeholder="请输入其他地址进行精确搜索" ></el-input>
                    </el-form-item>
                    <el-form-item label="宗教信仰" prop="ReligiousBelief">
                        <el-input v-model.trim="searchForm.ReligiousBelief" placeholder="请输入宗教信仰进行精确搜索" ></el-input>
                    </el-form-item>
                    <el-form-item label="身高">
                         <el-input-range :startValue.sync="searchForm.HeightStartRange"  :endValue.sync="searchForm.HeightEndRange"></el-input-range>                                                      
                    </el-form-item>                
                    <el-form-item label="血型" prop="BloodType">
                        <el-input v-model.trim="searchForm.BloodType" placeholder="请输入血型进行精确搜索" ></el-input>
                    </el-form-item>
                    <el-form-item label="服务处所" prop="RegisteredAddress">
                        <el-input v-model.trim="searchForm.RegisteredAddress" placeholder="请输入服务处所进行精确搜索" ></el-input>
                    </el-form-item>
                    <el-form-item label="何时由何地迁来本市" prop="WhenWhereMoveCity">
                        <el-input v-model.trim="searchForm.WhenWhereMoveCity" placeholder="请输入何时由何地迁来本市进行精确搜索" ></el-input>
                    </el-form-item>
                    <el-form-item label="何时由何地迁来本址" prop="WhenWhereMoveAddress">
                        <el-input v-model.trim="searchForm.WhenWhereMoveAddress" placeholder="请输入何时由何地迁来本址进行精确搜索" ></el-input>
                    </el-form-item>
                </el-form>
            </div>

        </el-card>


        <el-dialog v-dialogDrag title="户籍个人信息编辑对话框" :visible.sync="editorShow" width="80%" :lock-scroll="true" height="800px">
            <el-form v-if="editorShow == true" ref="editModalForm" :rules="editModalFormRules" :model="formData"
                label-width="140px" size="mini">
                <el-row :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="关联用户账号" prop="RelativeUserId">
                          <el-paged-select url="/User/List" columnName="Name" columnValue="Id"  v-model="formData.RelativeUserId" >
                          </el-paged-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="国籍" prop="Nationality">
                            <el-input v-model.trim="formData.Nationality"  ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="图片" prop="Photo">
                           <el-upload-images :limit="1" v-model="formData.Photo"></el-upload-images>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="身份证" prop="IdCard">
                            <el-input v-model.trim="formData.IdCard"  ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="姓名" prop="Name">
                            <el-input v-model.trim="formData.Name"  ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="学历" prop="Educational">
                            <el-input v-model.trim="formData.Educational"  ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="性别" prop="Sex">
                            <el-input v-model.trim="formData.Sex"  ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="婚姻情况" prop="Marriage">
                            <el-input v-model.trim="formData.Marriage"  ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="所属户口本" prop="HouseholdId">
                          <el-paged-select url="/Household/List" columnName="Name" columnValue="Id"  v-model="formData.HouseholdId" >
                          </el-paged-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="职业" prop="Occupation">
                            <el-input v-model.trim="formData.Occupation"  ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="籍贯" prop="OriginAddress">
                            <el-input v-model.trim="formData.OriginAddress"  ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="民族" prop="Hometown">
                            <el-input v-model.trim="formData.Hometown"  ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="户主或与户主的关系" prop="Relative">
                            <el-input v-model.trim="formData.Relative"  ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="出生地" prop="BirthAddress">
                            <el-input v-model.trim="formData.BirthAddress"  ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="兵役状况" prop="MilitaryStatus">
                            <el-input v-model.trim="formData.MilitaryStatus"  ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="曾用名" prop="BeforeName">
                            <el-input v-model.trim="formData.BeforeName"  ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="其他地址" prop="OtherAddress">
                            <el-input v-model.trim="formData.OtherAddress"  ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="宗教信仰" prop="ReligiousBelief">
                            <el-input v-model.trim="formData.ReligiousBelief"  ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="身高" prop="Height">
                            <el-input v-model.trim="formData.Height"  ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="血型" prop="BloodType">
                            <el-input v-model.trim="formData.BloodType"  ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="服务处所" prop="RegisteredAddress">
                            <el-input v-model.trim="formData.RegisteredAddress"  ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="何时由何地迁来本市" prop="WhenWhereMoveCity">
                            <el-input v-model.trim="formData.WhenWhereMoveCity"  ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="何时由何地迁来本址" prop="WhenWhereMoveAddress">
                            <el-input v-model.trim="formData.WhenWhereMoveAddress"  ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>


                <el-row type="flex" justify="end" align="bottom">
                    <el-form-item>
                        <el-button type="primary" plain @click="CreateOrEditForm()">确 定</el-button>
                        <el-button @click="editorShow = false">取 消</el-button>
                    </el-form-item>
                </el-row>
            </el-form>

        </el-dialog>


        <data-table ref="tableId" url="/CensusInfoPerson/List" :column="dataColum">
            <template v-slot:header>
                <el-button type="primary" plain icon="el-icon-edit" @click="ShowEditModal()">新 增</el-button>
                <el-button type="danger" plain icon="el-icon-delete" @click="ShowBatchDeleteModal()">批 量 删 除</el-button>
 				 </template>
            <template v-slot:operate="scope">
                <el-button type="text" @click="ShowEditModal(scope.row.Id)">修 改</el-button>
                <el-button type="text" @click="ShowDeleteModal(scope.row.Id)">删 除</el-button>
            </template>
        </data-table>
    </div>
</template>
    
<script>
import store from '@/store';
import { mapGetters } from 'vuex'
export default {
    name: "CensusInfoPersonList",
 	 computed: {
        ...mapGetters([
            'name', 'roleTypeFormat', 'avatar', 'userId', 'loginTimePeriod', "user", 'userId', 'roleType'
        ])
    },
    data() {

        return {
            lock: 0,//用来防止重复提交的变量
            searchForm: {},//搜索定义的数据对象
            dataColum: [
                {
                    key: "Id",
                    hidden: true,

                },
               {
                    key: "RelativeUserId",
                    hidden: true, 
                },
               {
                    key: "Nationality",
                    title: "国籍",
                    type: store.getters.columnType.SHORTTEXT, 
                },
               {
                    key: "Photo",
                    title: "图片",
                    type: store.getters.columnType.SHORTTEXT, 
                },
               {
                    key: "IdCard",
                    title: "身份证",
                    type: store.getters.columnType.SHORTTEXT, 
                },
               {
                    key: "Name",
                    title: "姓名",
                    type: store.getters.columnType.SHORTTEXT, 
                },
               {
                    key: "Educational",
                    title: "学历",
                    type: store.getters.columnType.SHORTTEXT, 
                },
               {
                    key: "Sex",
                    title: "性别",
                    type: store.getters.columnType.SHORTTEXT, 
                },
               {
                    key: "Birth",
                    title: "出生年月",
                    type: store.getters.columnType.SHORTTEXT, 
                },
               {
                    key: "Marriage",
                    title: "婚姻情况",
                    type: store.getters.columnType.SHORTTEXT, 
                },
               {
                    key: "HouseholdId",
                    hidden: true, 
                },
               {
                    key: "Occupation",
                    title: "职业",
                    type: store.getters.columnType.SHORTTEXT, 
                },
               {
                    key: "OriginAddress",
                    title: "籍贯",
                    type: store.getters.columnType.SHORTTEXT, 
                },
               {
                    key: "Hometown",
                    title: "民族",
                    type: store.getters.columnType.SHORTTEXT, 
                },
               {
                    key: "Relative",
                    title: "户主或与户主的关系",
                    type: store.getters.columnType.SHORTTEXT, 
                },
               {
                    key: "BirthAddress",
                    title: "出生地",
                    type: store.getters.columnType.SHORTTEXT, 
                },
               {
                    key: "MilitaryStatus",
                    title: "兵役状况",
                    type: store.getters.columnType.SHORTTEXT, 
                },
               {
                    key: "BeforeName",
                    title: "曾用名",
                    type: store.getters.columnType.SHORTTEXT, 
                },
               {
                    key: "OtherAddress",
                    title: "其他地址",
                    type: store.getters.columnType.SHORTTEXT, 
                },
               {
                    key: "ReligiousBelief",
                    title: "宗教信仰",
                    type: store.getters.columnType.SHORTTEXT, 
                },
               {
                    key: "Height",
                    title: "身高",
                    type: store.getters.columnType.SHORTTEXT, 
                },
               {
                    key: "BloodType",
                    title: "血型",
                    type: store.getters.columnType.SHORTTEXT, 
                },
               {
                    key: "RegisteredAddress",
                    title: "服务处所",
                    type: store.getters.columnType.SHORTTEXT, 
                },
               {
                    key: "WhenWhereMoveCity",
                    title: "何时由何地迁来本市",
                    type: store.getters.columnType.SHORTTEXT, 
                },
               {
                    key: "WhenWhereMoveAddress",
                    title: "何时由何地迁来本址",
                    type: store.getters.columnType.SHORTTEXT, 
                },
                {
                    title: "操作",
                    type: store.getters.columnType.USERDEFINED,
                },
            ],
            editModalFormRules: {
              "RelativeUserId":[
              ],
              
              "Nationality":[
                { required: true, message: '该项为必填项', trigger: 'blur' },
              ],
              
              "Photo":[
                { required: true, message: '该项为必填项', trigger: 'blur' },
              ],
              
              "IdCard":[
                { required: true, message: '该项为必填项', trigger: 'blur' },
              ],
              
              "Name":[
                { required: true, message: '该项为必填项', trigger: 'blur' },
              ],
              
              "Educational":[
                { required: true, message: '该项为必填项', trigger: 'blur' },
              ],
              
              "Sex":[
                { required: true, message: '该项为必填项', trigger: 'blur' },
              ],
              
              "Birth":[
              ],
              
              "Marriage":[
                { required: true, message: '该项为必填项', trigger: 'blur' },
              ],
              
              "HouseholdId":[
              ],
              
              "Occupation":[
                { required: true, message: '该项为必填项', trigger: 'blur' },
              ],
              
              "OriginAddress":[
                { required: true, message: '该项为必填项', trigger: 'blur' },
              ],
              
              "Hometown":[
                { required: true, message: '该项为必填项', trigger: 'blur' },
              ],
              
              "Relative":[
                { required: true, message: '该项为必填项', trigger: 'blur' },
              ],
              
              "BirthAddress":[
                { required: true, message: '该项为必填项', trigger: 'blur' },
              ],
              
              "MilitaryStatus":[
                { required: true, message: '该项为必填项', trigger: 'blur' },
              ],
              
              "BeforeName":[
                { required: true, message: '该项为必填项', trigger: 'blur' },
              ],
              
              "OtherAddress":[
                { required: true, message: '该项为必填项', trigger: 'blur' },
              ],
              
              "ReligiousBelief":[
                { required: true, message: '该项为必填项', trigger: 'blur' },
              ],
              
              "Height":[
                { required: true, message: '该项为必填项', trigger: 'blur' },
              ],
              
              "BloodType":[
                { required: true, message: '该项为必填项', trigger: 'blur' },
              ],
              
              "RegisteredAddress":[
                { required: true, message: '该项为必填项', trigger: 'blur' },
              ],
              
              "WhenWhereMoveCity":[
                { required: true, message: '该项为必填项', trigger: 'blur' },
              ],
              
              "WhenWhereMoveAddress":[
                { required: true, message: '该项为必填项', trigger: 'blur' },
              ],
              
            },
            formData: {

            },//保存或者修改定义的数据对象
            editorShow: false,//编辑弹窗定义的数据对象

        };
    },
    created() {

    },
    methods: {
        /**
         * 点击新增或者编辑的时候会触发
         */
        async ShowEditModal(Id) {

            let { Data } = await this.$Post(`/CensusInfoPerson/Get`, { Id: Id });
            this.formData = Data;
            this.formData.Behavior=null;
            this.formData.IsEdit=Id!=undefined;
            
            this.editorShow = true;

        },
        /**
         * 点击保存的时候会触发
         */
        async CreateOrEditForm() {
            if (this.lock == 1) return;
            this.$refs.editModalForm.validate(async valid => {
                if (valid) {
                    this.lock = 1;
                    var { Success } = await this.$PostLoading(`/CensusInfoPerson/CreateOrEdit`, this.formData);
                    this.lock = 0;
                    if (Success) {
                        this.editorShow = false;
                        this.$refs.tableId.reload();
                    }
                }
            })
        },
        /**
         * 单个删除的时候会触发
         */
        async ShowDeleteModal(Id) {
            await this.$PostDelete(`/CensusInfoPerson/Delete`, { Id: Id });
            this.$refs.tableId.reload();
        },
        /**
         * 批量删除的时候会触发
         */
        async ShowBatchDeleteModal() {
            var ids = this.$refs.tableId.GetSelectionRow().map(x => x.Id);
            await this.$PostDelete(`/CensusInfoPerson/BatchDelete`, { Ids: ids });
            this.$refs.tableId.reload();
        },
        /**
         * 点击表格搜索按钮会触发
         */
        async TableSearch() {
            this.$refs.tableId.reload(this.searchForm);
        },
        /**
         * 点击清空表单会触发
         */
        async Reset() {
            this.searchForm = {};
            this.$refs.tableId.reload(this.searchForm);
        },

        /**
         * 导入成功
         */
        async ImportSuccess() {

            this.$refs.tableId.reload();
        },


    },
};
</script>
    